<!DOCTYPE html>
<html>

<head>
    <meta charset=" utf-8">
    <meta name="author" content="http://www.softwhy.com/" />
    <title>蚂蚁部落</title>
    <style type="text/css">
 div { width: 100px; height: 100px; background: red; position: relative; animation: theanimation 1s linear .1s infinite alternate; } @keyframes theanimation { 0% { top: 0px; left: 0px; background: red; } 25% { top: 0px; left: 100px; background: blue; } 50% { top: 100px; left: 100px; background: yellow; } 75% { top: 100px; left: 0px; background: green; } 100% { top: 0px; left: 0px; background: red; } }
    </style>
</head>

<body>
    <div></div>
</body>

</html>
